<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学校新闻获取</title>
  <!-- cdn引用组件 -->
  <!-- <script src="//unpkg.com/layui@2.9.8/dist/layui.js"></script> -->
  <!-- <link href="//unpkg.com/layui@2.9.8/dist/css/layui.css" rel="stylesheet"> -->
  <link href="/static/css/layui.css" rel="stylesheet">
  <script src="/static/js/layui.js"></script>
  <script src="/static/js/jquery-3.6.0.min.js"></script>
</head>

<body>
  <table class="layui-hide" id="ID-table-demo-data"></table>

  <script>
    data = "[{'id': 1, 'date': '2024-04-27', 'title': '中国教育在线', 'body': '海经贸定点帮扶考核连续三年获最高等次评价“好”', 'uurl': 'https://hainan.eol.cn/hngd/202404/t20240426_2601627.shtml'}, {'id': 2, 'date': '2024-04-26', 'title': '海南日报', 'body': '海经贸定点帮扶考核连续三年获最高等次评价“好”', 'uurl': 'https://res.hndaily.cn/file/news/20240426/cid_131_476273.html'}]"
    url = 'http://127.0.0.1/api/spider'
    $.get(url, (data) => {
      console.log(data);
      show(data)
    })
    show(data)
    function show(data) {
      layui.use('table', function () {
        var table = layui.table;
        // 已知数据渲染
        var inst = table.render({
          elem: '#ID-table-demo-data',
          toolbar: 'default',
          height: 'full',
          cols: [[ //标题栏
            { field: 'id', title: '序号', width: 200 },
            { field: 'date', title: '日期 ', width: 300 },
            { field: 'title', title: '标题 ', width: 300 },
            { field: 'body', title: '媒体', width: 300 },
            { field: 'uurl', title: '链接', width: 300 },
          ]],
          data: data,
          //skin: 'line', // 表格风格
          //even: true,
          page: true, // 是否显示分页
          limits: [15, 30, 45],
          limit: 15 // 每页默认显示的数量
        });
      });
    }

  </script>

</body>

</html>